<template>
  <div>
    <div class="title-btn">
      <div style="display:flex;">
        <el-input style="width:180px;margin-right:20px;" placeholder="公告名称" v-model="cementname"></el-input>
        <el-date-picker
          v-model="starttime"
          type="daterange"
          style="margin-right:20px;"
          rangeSeparator="至"
          startPlaceholder="开始时间"
          endPlaceholder="结束时间"
          valueFormat="yyyy-MM-dd"
          @change="pickerchange"
        ></el-date-picker>
        <el-select v-model="msgtype" clearable style="margin-right:20px;">
          <el-option v-for="(item,index) in daimaList" :key="index" :label="item.hash.code_name" :value="item.hash.code_name"></el-option>
        </el-select>
        <el-button type="primary" size="mini" @click="search">搜索</el-button>
      </div>
    </div>
    <el-table
      :data="alarmArr"
      style="width: 100%"
    >
      <el-table-column
        type="index"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="hash.title"
        label="标题"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="hash.username"
        label="发布人"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="hash.msgtype"
        label="类型"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="hash.context"
        label="内容"
      >
      </el-table-column>

      <el-table-column
        prop="hash.createtime"
        label="发布时间"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="hash.readcount"
        label="阅读人数"
        width="100"
      >
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="checkmymessage(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="pagobj.currentPage3"
      :pageSize="pagobj.pagesize"
      layout="total, prev, pager, next"
      :total="pagobj.total"
      style="margin:20px 0;text-align:center"
    >
    </el-pagination>
    <el-dialog
      title="查看"
      :visible.sync="dia1"
      width="40%"
    >
      <div class="tz_content">
        <div>{{check_content.username}}发布{{check_content.msgtype}}:</div>
        <div>{{check_content.context}}</div>
        <div>{{check_content.createtime}}</div>
        <upload2 :filelimit="5" :filelink.sync="filearr2" :isedit="true" :ispic="false"></upload2>
      </div>
      <div class="tz_liuyan">
        <div class="chatbox">
          <div v-for="(item,index) in check_liuyan" :key="index">
            <div class="chat">
              <p>{{item.hash.username}}： {{item.hash.context}}</p>
              <p class="tr">{{item.hash.createdate}}</p>
            </div>
          </div>
          <div class="textbox">
            <el-form labelWidth="40px">
              <el-form-item label="内容">
                <el-input v-model="textarea" type="textarea"></el-input>
                <el-button
                  style="float:right;margin-top:10px"
                  type="primary"
                  size="mini"
                  @click="sendliuyan"
                >发送</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import upload2 from '~/components/common/upload2.vue';

export default {
  data() {
    return {
      dia1: false,
      dia2: false,
      ts: this.newStore(),
      alarmArr: [],
      // alarmData: {},
      starttime: [],
      daimaList: [],
      cementname: '',
      msgtype: '',
      addtongzhi: {
        tz_title: '',
        tz_context: '',
        tz_msgtype: '',
        tz_user: [],
      },
      title: '',
      dialogindex: '',
      msgid: '',
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
      arr: [],
      morenarr: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      planperson: [],
      mineStatusValue: [],
      check_content: {},
      check_liuyan: [],
      showcement: false,
      textarea: '',
      filearr1: [],
      filearr2: [],
    };
  },
  components: {
    upload2,
  },
  created() {
    this.getalarmArr();
    this.getcodetypelist();
  },
  methods: {
    reload(partsname) {
      this[partsname] = false;
      this.$nextTick(() => {
        this[partsname] = true;
      });
    },
    handleCurrentChange() {
      this.getalarmArr();
    },
    closemymessage() {
      this.getalarmArr();
      // this.$router.go(0);
      this.dia1 = false;
    },
    getalarmArr() {
      const req = {
        handle: '0191283F93927EDB050783D3551EBA10D378DC084872ED09F33AC00D936FAE5A',
        msgtype: this.msgtype,
        title: this.cementname,
        createtime_begin: this.starttime[0],
        createtime_end: this.starttime[1],
        start: (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize,
        limit: this.pagobj.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.alarmArr = ts.d.data.operation1;
        this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
    search() {
      this.getalarmArr();
    },
    pickerchange() {
      this.$nextTick(() => {
        if (this.starttime == null) {
          this.starttime = [];
        }
      });
    },
    checkmymessage(row) {
      this.filearr2.splice(0, this.filearr2.length);
      this.dia1 = true;
      console.log(row);
      this.msgid = row.hash.msgid;
      // this.alarmData = {};
      const req = {
        handle: '0191283F93927EDB050783D3551EBA1053F6ECF60F140298',
        msgid: row.hash.msgid,

      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.check_content = ts.d.data.operation1[0].hash;
        this.check_liuyan = ts.d.data.operation3;
        ts.d.data.operation4.forEach((item) => {
          const obj = {};
          obj.url = item.hash.fileurl;
          obj.name = item.hash.filename;
          this.filearr2.push(obj);
        });
      });
    },
    visibleChange() {
      // console.log('1111111', this.planperson);
      this.$nextTick(() => {
        this.$refs.tree.setCheckedNodes(this.mineStatusValue);
      });
    },
    getcodetypelist() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '0601',
        codetype: '06',
        notactive: '-1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.daimaList = ts.d.data.operation1;
      });
    },
    sendliuyan() {
      const req = {
        handle:
          '0191283F93927EDB050783D3551EBA10520C55FD7F8BC16E35A0ACC69E1EA1BF',
        msgid: this.msgid,
        context: this.textarea,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          const req = {
            handle: '0191283F93927EDB050783D3551EBA1053F6ECF60F140298',
            msgid: this.msgid,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            this.check_liuyan = ts.d.data.operation3;
          });
        }
      });
    },
  },
};
</script>

<style scope>
.tz_content{
  border: 1px solid #c0c4cc;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
.tz_content div{
  margin: 10px 0;
}
.tz_content div:nth-of-type(2){
  text-indent:2em;
}
.tz_content div:nth-of-type(3){
  text-align: right;
}
.tz_liuyan{
  border: 1px solid #c0c4cc;
  border-radius: 4px;
  padding: 20px;
}
.title-btn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.foot {
  text-align: right;
}
.chatbox {

}
.chatbox .chat {
  border: 1px solid #c0c4cc;
  padding: 15px;
  margin: 10px 0;
  border-radius: 20px;
}
.chatbox .chat p{
  line-height: 20px;
}
</style>
